<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/jquery.js"></script>
</head>

<body>
<div id="login_box">
    <h2>登 录</h2>
    <form id="form">
        <div class="input_box">
            <input id="name" type="text" name="name" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="password" type="password" name="password" placeholder="请输入密码">
        </div>
        <p id="resturnInfo" value=""></p>
    </form>

    <button id="sign_in" onclick="toLogin()">登录</button>

    <button id="enroll">没有账号？<a href="register.html">注册</a></button>
    <!-- 删掉a标签即可-->
</div>
<script>
    function toLogin(){
        let name = document.getElementById("name").value
        let password = document.getElementById("password").value
        console.log(name)
        console.log(password)
        // 将字符串转换为json格式
        let data = JSON.stringify({
            name:name,
            password:password
        })
        $.ajax(
            {
                type:"post",
                dataType: "json",

                contentType: "application/json",
                url: "http://localhost:8081/login",
                data:data,
                success(data){
                    console.log(data)
                    if (data.state === "true"){
                        // 使用浏览器缓存
                        window.sessionStorage.setItem("token",data.token)
                        window.sessionStorage.setItem("user",name)
                        // 页面跳转
                        $(window).attr("location","index.html")
                    }
                    else {
                        alert("账号或密码错误！")
                    }
                },
                fetch(data){
                    console.log(data)
                }
            },

        )
    }
</script>
</body>

</html>